<style>

.search-tab{height: 0.84rem;width: 85%;background-color: #12a5d9;position: relative;margin: 0 auto;}
.search-tab .item{width: 25%;height: 100%;text-align: center;line-height: .88rem;color: #FFFFFF;float: left;position: relative;}
.search-tab .item.active::after{position: absolute;content: "";width: 100%;height: .05rem;background-color: #FFFFFF;bottom:-0.01rem;left: 0;}
.search-content{position: fixed;width: 100%;left: 0;top: .84rem;bottom: 0;background-color: #ececec;}
.search-content .item {position: absolute;top: 0;left: 0;background-color: #ececec;width: 100%;height: 100%;}
.search-content .item.active {z-index: 10;}
.search-content .item .search-box{width: 92%;height: .8rem;background-color: #FFFFFF;color: #999;line-height: .8rem;position: relative;margin: .2rem auto;border-radius: .08rem;}
.search-content .item .search-box .search{width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding-left:.8rem ;border-radius: .08rem;font-size: .32rem;}
::-webkit-input-placeholder{color: #ccc;}
::-moz-placeholder{ color:  #ccc;}
:-ms-input-placeholder{color:  #ccc;}
.search-content .item .search-box i{width: .8rem;height: .8rem;position: absolute;top: 0;left: 0;content: "";text-align: center;z-index: 10;font-size: .35rem;}
.search-content .item .his-record {height: calc(100% - 0.8rem);}
.search-content .item .his-record .title{width:92%;margin: 0 auto;height: .8rem;line-height: .8rem;font-size: .28rem;position: relative;}
.search-content .item .his-record .title i{position: absolute;width: .8rem;height: .8rem;right: 0;top: 0;content: "";text-align: center;font-size: .35rem;}
.search-content .item .his-record .record-list{width: 92%;margin: 0 auto;border-radius: .08rem;position: relative;background-color: #FFFFFF;padding: .2rem;}
.search-content .item .his-record .record-list .record-item{display:inline-block;height: .5rem;margin: .1rem .1rem;border-radius: .4rem;border: 1px solid #12a5d9;color: #12a5d9;padding: 0 .15rem;line-height: .5rem;text-align: center;font-size: .3rem;white-space: nowrap;}
.search-content .item .his-record .record-list .no-record{height: .8rem;width: 100%;text-align: center;line-height: .8rem;font-size: .24rem;color: #999;}
</style>
<!--<ul class="search-tab">
	<li class="item f_left active">服务</li>
	<li class="item f_left">活动</li>
	<li class="item f_left">专家</li>
	<li class="item f_left">企业</li>
</ul>-->
<ul class="search-content">
	<li class="item active">
		<div class="search-box">
			<i class="iconfont icon-search"></i>
			<input type="text" placeholder="输入关键字" class="search" />
		</div>
		
		<div class="his-record">
			<div class="title">
				历史搜索
				<i class="iconfont icon-iconfonticonfontdelete"></i>
				
			</div>
			<div class="record-list">
				<a class="record-item ">人人贷</a>
				<a class="record-item ">人人人贷</a>
				<a class="record-item ">人人贷</a>
				<a class="record-item ">人人贷人人贷</a>
			</div>
		</div>
	</li>
	<li class="item">
		<div class="search-box">
			<i class="iconfont icon-search"></i>
			<input type="text" placeholder="输入关键字" class="search" />
		</div>
		
		<div class="his-record">
			<div class="title">
				历史搜索
				<i class="iconfont icon-iconfonticonfontdelete"></i>
			</div>
			<div class="record-list">
				<a class="record-item">输入人人贷</a>
				<a class="record-item">输人人贷关键</a>
				<a class="record-item">输入人人贷键</a>
				<a class="record-item">输入关键人贷</a>
			</div>
		</div>
	</li>
	<li class="item" >
		<div class="search-box">
			<i class="iconfont icon-search"></i>
			<input type="text" placeholder="输入关键字" class="search" />
		</div>
		
		<div class="his-record">
			<div class="title">
				历史搜索
				<i class="iconfont icon-iconfonticonfontdelete"></i>
				
			</div>
			<div class="record-list">
				<a class="record-item">3</a>
				<a class="record-item">33</a>
				<a class="record-item">333</a>
				<a class="record-item">3333</a>
			</div>
		</div>
	</li>
	<li class="item">
		<div class="search-box">
			<i class="iconfont icon-search"></i>
			<input type="text" placeholder="输入关键字" class="search" />
		</div>
		
		<div class="his-record">
			<div class="title">
				历史搜索
				<i class="iconfont icon-iconfonticonfontdelete"></i>
				
			</div>
			<div class="record-list">
				<a class="record-item">44</a>
				<a class="record-item">4</a>
				<a class="record-item">44444</a>
				<a class="record-item">44444</a>
			</div>
		</div>
	</li>
</ul>